<template>
    <div :style="styleObj">
        <button :style="buttonStyleObj" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '进入全屏'">
            <i :style="iconStyleObj" class="el-icon-full-screen"></i>
        </button>
    </div>
</template>

<script>
export default {
    name: "widgetFullscreen",
    props: {
        value: Object,
        ispreview: Boolean,
        widgetIndex: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            isFullscreen: false,
            optionsStyle: {},
            optionsSetup: {},
            fullscreenElement: null
        };
    },
    computed: {
        // 修改styleObj计算属性
        styleObj() {
           return {
                position: this.ispreview ? "absolute" : "static",
                width: this.optionsStyle.width + "px",
                height: this.optionsStyle.height + "px",
                left: this.optionsStyle.left + "px",
                top: this.optionsStyle.top + "px",
                display: this.optionsSetup.hideLayer ? "none" : "block" // 移除ispreview对display的控制
            };
        },
        buttonStyleObj() {
            const size = this.optionsSetup.buttonSize || 40;
            const color = this.optionsSetup.buttonColor || '#409EFF';

            const baseStyle = {
                width: size + 'px',
                height: size + 'px',
                backgroundColor: color,
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                outline: 'none',
                transition: 'all 0.3s ease'
            };

            if (this.optionsSetup.buttonStyle === 'custom') {
                // 可以添加更多自定义样式选项
            }

            return baseStyle;
        },
        iconStyleObj() {
            const size = (this.optionsSetup.buttonSize || 40) * 0.6 + 'px';
            const color = this.optionsSetup.iconColor || '#FFFFFF';

            return {
                fontSize: size,
                color: color,
                transform: this.isFullscreen ? 'rotate(180deg)' : 'rotate(0deg)',
                transition: 'transform 0.3s ease'
            };
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val) {
                    this.optionsStyle = val.position || {};
                    this.optionsSetup = val.setup || {};
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.optionsStyle = this.value && this.value.position ? this.value.position : {};
        this.optionsSetup = this.value && this.value.setup ? this.value.setup : {};

        // 监听全屏状态变化
        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
        document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
        document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
        document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
    },
    beforeDestroy() {
        // 移除事件监听
        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
        document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
        document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
        document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
    },
    methods: {
        toggleFullscreen() {
                 console.log('--------toggleFullscreen----------');
            console.log(this.optionsSetup);
            if (!document.fullscreenElement &&
                !document.webkitFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.msFullscreenElement) {
                // 进入全屏
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
                }
            } else {
                // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
        },
        handleFullscreenChange() {
            this.isFullscreen = !!(document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement);
        }
    }
};
</script>

<style scoped lang="scss">
button:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}
</style>